<template>
  <div class="bg-[#F2F7FA] flex relative x6-editor w-full h-full">
    <div class="flex-1 flex items-center justify-center">
      <div class="graph-canvas relative z-10">
        <rulerSketchWarpper  :width="width" :height="height" :scale="graphStore.graph.scaleCount">
          <div id="editor-content"></div>
        </rulerSketchWarpper>
        <GraphContextmenu
          ref="graphContextmenuRef"
          @select="handleSelectContextmenu"
        ></GraphContextmenu>
      </div>
    </div>

    <GraphPageCard></GraphPageCard>
    <GraphEditorTools></GraphEditorTools>
    <TeleportContainer />
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue'
import { getTeleport } from '@antv/x6-vue-shape'
import { useGraphStore } from '@/store/modules/graphStore.js'
import { initRegisterNodes } from '@/components/graph-node/index.js'
import rulerSketchWarpper from '@/views/graph-editor/components/graph-center-panel/components/ruler-sketch/ruler-sketch-warpper.vue'
import GraphPageCard from '@/views/graph-editor/components/graph-center-panel/components/graph-page-card.vue'
import GraphEditorTools from '@/views/graph-editor/components/graph-center-panel/components/graph-editor-tools.vue'
import GraphContextmenu from '@/views/graph-editor/components/graph-center-panel/components/graph-contextmenu.vue'
initRegisterNodes()
const TeleportContainer = getTeleport()
const graphStore = useGraphStore()
const { initCanvas, copyNodes, delNodes, pasteNodes, onChangePage, graph, clearGraph } = graphStore
const { width, height } = graphStore.graph.info

const graphContextmenuRef = ref(null)
onMounted(async () => {
  const canvasEditor = await initCanvas({
    width,
    height,
    element: document.querySelector('#editor-content')
  })
  initEvents(canvasEditor)
  await nextTick(() => {
    if (graph.pageList.length) {
      onChangePage(graph.pageList[0])
    }
  })
})
const initEvents = (canvasEditor) => {
  canvasEditor.on('node:contextmenu', ({ node, x, y }) => {
    graphContextmenuRef.value.showContextmenu('node', { node, x, y })
  })

  canvasEditor.on('blank:contextmenu', ({ node, x, y }) => {
    graphContextmenuRef.value.showContextmenu('graph', { node, x, y })
  })
}
// 注册自定义节点

const handleSelectContextmenu = ({ key, node }) => {
  switch (key) {
    case 'copy':
      copyNodes()
      break
    case 'paste':
      pasteNodes()
      break
    case 'del':
      delNodes()
      break
    case 'clear':
      clearGraph()
      break
    case 'top':
      node.toFront()
      break
    case 'bottom':
      node.toBack()
  }
}
</script>

<style lang="less">
.x6-editor {
  position: relative;

  .editor-minimap {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 4px;
    overflow: hidden;

    .editor-minimap-action {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 24px;
      height: 24px;
      background-color: rgba(0, 0, 0, 0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      cursor: pointer;
      color: #ffffff;
      z-index: 99;

      &:hover {
        color: orange;
      }
    }
  }
}
</style>
